<style scoped>
h1 {
  font-size: 36px;
}
.head {
  margin-bottom: 20px;
}
.el-form img {
  vertical-align: middle;
  margin-right: 10px;
}
.demo-form-inline >>> .el-form-item__label {
  padding: 0;
}
.demo-form-inline >>> .el-form-item__content {
  margin-left: 28px !important;
}
</style>
<template>
  <div class="type">
    <ywg-title></ywg-title>
    <!-- 弹框 -->
    <el-dialog
      :title="'将‘' + popUp.title + '’改成……'"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-input placeholder="请输入修改的类名" v-model="popUp.input" clearable>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="tijiao">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 头部表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="添加新分类">
        <el-input v-model="formInline.name" placeholder="类型"></el-input>
      </el-form-item>
      <el-form-item>
        <img
          class="thisImg"
          ref="thisImg"
          @click="updateimg"
          :src="$svg_num"
          alt="svg验证码"
        />
        <el-input
          v-model="formInline.yzm"
          placeholder="验证"
          style="width: 100px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border v-loading="loading">
      <el-table-column align="center" prop="_id" label="分类id" width="260">
      </el-table-column>
      <el-table-column align="center" prop="name" label="分类名称" width="180">
      </el-table-column>
      <el-table-column align="center" prop="" label="编辑" width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="是否公布" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.publish"
            active-text="公开"
            inactive-text="隐藏"
            @change="swiper(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="deleteD(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ywgTitle from "../admin/common/title";
export default {
  components: {
    ywgTitle,
  },
  created() {
    this.getData();
    console.log(this.$route);
  },
  methods: {
    // swiper点击切换显示状态
    async swiper(obj) {
      this.loading = true;
      let { _id, publish } = obj;
      publish = publish == true ? 1 : 0;
      let data = await this.$http.post("/type/show", { id: _id, publish });
      if (data.data.code == 0) {
        this.$message({
          message: data.data.msg,
          type: "success",
        });
        // 重新加载vuex   中的typeList
        this.$http.get("/type").then((data) => {
          if (!data.data.code) {
            this.$store.commit("base/setTypeList", data.data.data);
          }
        });
      } else {
        this.$message({
          message: data.data.msg,
          type: "warning",
        });
      }
      this.loading = false;
    },
    // 点击切换验证图
    updateimg() {
      let date = new Date();
      let time = date.getTime();
      // 图片的src属性，拼接每次产生的时间戳
      this.$refs.thisImg.setAttribute(
        "src",
        `${this.$svg_num}?id=${time}`
      );
      console.log(this.$svg_num);
    },
    // 添加
    onSubmit() {
      let { yzm, name } = this.formInline;
      if (yzm == "" || name == "") {
        this.$message.error("啊哈~~~~~你在做什么？");
      } else {
        this.$http
          .post("/type/add", {
            name,
            yzm,
          })
          .then((data) => {
            if (data.data.code == 0) {
              this.$message({
                message: data.data.msg,
                type: "success",
              });
              // 拉取新数据
              this.getData();
              // 清空输入的内容
              this.formInline = { name: "", yam: "" };
            } else {
              this.$message({
                message: data.data.msg,
                type: "warning",
              });
            }
            //刷新图片
            this.updateimg();
          });
      }
    },
    // 点击编辑
    handleClick(row) {
      this.popUp.title = row.name;
      this.popUp.id = row._id;
      this.centerDialogVisible = true;
    },
    // 编辑里面的提交
    tijiao() {
      this.$http
        .post("/type/setName", { id: this.popUp.id, name: this.popUp.input })
        .then((data) => {
          console.log(data.data);
          if (data.data.code == 0) {
            this.$message({
              message: data.data.msg,
              type: "success",
            });
            // 拉取新数据
            this.getData();
            // 清空输入的内容
            this.popUp = { input: "", title: "", id: "" };
            this.centerDialogVisible = false;
            this.$http.get('/type').then((data)=>{
            if(!data.data.code){
                this.$store.commit('base/setTypeList',data.data.data);
              }
            })
          } else {
            this.$message({
              message: data.data.msg,
              type: "warning",
            });
          }
        });
    },
    deleteD(row) {
      let id = row._id;
      this.$confirm("此操作将删除分类标题, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post("/type/delete", { id }).then((data) => {
            if (data.data.code == 0) {
              this.$message({
                type: "success",
                message: data.data.msg,
              });
              // 重新拉取列表
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getData() {
      this.loading = true;
      this.$http.get("/type").then((data) => {
        if (!data.data.code) {
          this.tableData = data.data.data;
          this.loading = false;
        }
      });
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      formInline: {
        name: "",
        yam: "",
      },
      centerDialogVisible: false,
      popUp: {
        input: "",
        title: "xxx",
        id: "",
      },
    };
  },
  watch: {
    // 监听编辑窗口的boolean值，执行：如果编辑窗口关闭了，就清空编辑信息
    centerDialogVisible(newVal) {
      if (!newVal) {
        this.popUp = {
          input: "",
          title: "",
          id: "",
        };
      }
    },
  },
};
</script>